/* components */
import SettingGPTCloseView from "@src/modules/setting/gpt/views/index/close";
import SettingGPTOpenView from "@src/modules/setting/gpt/views/index/open";
import SettingGPTHomeView from "@src/modules/setting/gpt/views/home";
/* enum */
import ComponentNameEnum from "@model/enum/ComponentNameEnum";
/* vue */
import { defineComponent } from "vue";
/* hooks */
import { useBaoGPTSetting } from "@src/modules/setting/gpt/hooks";
/* util */
import { isFalsy } from "@src/util/type";
/* scss */
import "@src/modules/setting/gpt/views/index/index.scss";

export default defineComponent({
  name: ComponentNameEnum.SettingGPTIndexView,
  props: {
    
  },
  setup(props, { emit }) {
    
    const { 
      isOpen,
      loading, 
      setting, 
      initialize,
      onChangeCommonModelHandler,
      onChangeModuleListHandler
    } = useBaoGPTSetting()
    
    return {
      isOpen,
      loading,
      setting,
      initialize,
      onChangeCommonModelHandler,
      onChangeModuleListHandler
    }
    
  },
  data() {
    return {
      isFirstLoad: true
    }
  },
  computed: {
    attrs(): Record<string, any> {
      return {
        directives: [
          {
            name: "loading",
            value: this.loading
          }
        ]
      }
    }
  },
  mounted() {
    this.initialize()
      .finally(() => {
        this.isFirstLoad = false
      })
  },
  methods: {
    renderContent() {
      
      // 如果第一次正在加载中, 则不渲染
      if (this.isFirstLoad) {
        return
      }
      
      // 如果是关闭状态, 则渲染关闭视图
      if (isFalsy(this.isOpen)) {
        return <SettingGPTCloseView />
      }
      
      // 如果是打开状态, 则渲染打开视图
      return (
        <SettingGPTHomeView />
      )
      
    }
  },
  render() {
    return (
      <div 
        class={ComponentNameEnum.SettingGPTIndexView}
        {...this.attrs}
      >
        { this.renderContent() }
      </div>
    )
  }
});